<template>
  <view>
    <view class="top-bg"></view>
    <view class="wrap">
      <u-swiper :list="bannerList" :border-radius='20' height="278"></u-swiper>
      <u-gap height="30"></u-gap>
      <u-search placeholder="请输入关键字" v-model="searchKeywords" :clearabled="true" :focus="true" bg-color="#fff"
        :action-style="searchActionStyle" @search="searchCheck" @custom="searchCheck"></u-search>
      <!-- 错误提示 -->
      <u-toast ref="uToast"></u-toast>
      <view class="top-nav">
        <swiper class="swiper" @change="swipe">
          <swiper-item v-for="(page, pageNum) in allTypeData" :key="pageNum">
            <u-grid :col="4" hover-class="hover-class" :border="false">
              <u-grid-item v-for="(item, index) in page" :index="index" :key="index" @tap="change(item)">
                <img :src="item.pic | fullImgPath">
                <text class="grid-text">{{ item.name }}</text>
              </u-grid-item>
            </u-grid>
          </swiper-item>
        </swiper>
        <view class="indicator-dots">
          <view v-for="(item,index) in allTypeData" :key="index" class="indicator-dots-item"
            :class="[current == index ? 'indicator-dots-active' : '']">
          </view>
        </view>
      </view>

      <view class="list" v-for="(item, index) in allGoodsData" :key="index">
        <view class="tit" :id="item.type_id">
          <view class="bt">
            <img style="width: 46rpx;" :src="item.icon | fullImgPath">
            <span>{{ item.type_name }}</span>
          </view>
        </view>
        <view class="inner-list">
          <view class="item" v-for="(inner, index2) in item.type" :key="index2"
            @tap="changeToDetail(inner, item.type_name)" :class="inner.show === false ? 'soldOut' : ''">
            <!-- <u-image class="img" :src="inner.pic"></u-image> -->
            <u-lazy-load :image="inner.pic | formatInner" :loading-img="loadingImg" threshold="400">
            </u-lazy-load>
            <view class="title u-line-2">{{ inner.title }}</view>
            <view class="tags">
              <span v-for="(keywords,index3) in (inner.keywords || '').split(',')" :key="index3">
                <span v-if="keywords === ''">
                  优惠中
                </span>
                <span v-else>
                  {{keywords}}
                </span>
              </span>
            </view>
            <view class="card-footer">
              <span class="price">￥{{ inner.price }}</span>
              <span class="details"><img style="width: 32rpx;" :src="detailsIcon" alt="">详情</span>
            </view>
          </view>
        </view>

        <view class="more" @tap="changeToList(item.type_id, item.type_name)">
          查看更多【{{item.type_name}}】
        </view>
      </view>



      <view class="fixed-bottom" @click="makePhone">
        <u-icon name="phone" size="28"></u-icon>
        专员热线：
        <span class="number">{{salephone}}</span>
        <span>（点此拨打）</span>
      </view>


      <ScrollTop :scrollTopVal="scrollTopVal"></ScrollTop>
    </view>

  </view>
</template>

<script>
  import joy from '@/static/joy.png'
  import loadingImg from '@/static/loadingImg.gif'
  import ScrollTop from '@/components/ScrollTop/scrollTop'
  import {
    getGoodsList,
    groupByType
  } from '@/utils/goods.js'
  import {
    getIndexNavType
  } from '@/utils/type.js'
  import {
    publicApi
  } from '@/utils/public.js'

  export default {
    data() {
      return {
        bannerList: [],
        allGoodsData: [],
        goodsListdata: [],
        allTypeData: [],
        detailsIcon: joy,
        loadingImg: loadingImg,
        goodsKeywords: '',
        salephone: '',
        titlename: '',
        current: 0,
        navPageSize: 8,
        scrollTopVal: null,
        searchKeywords: '',
        searchActionStyle: {
          backgroundColor: "#fd2f3d",
          borderRadius: "0 30rpx 30rpx 0",
          color: "#fff",
          height: "60rpx",
          lineHeight: "60rpx",
          textAlign: "center",
          width: "120rpx",
          margin: "0",
          paddingRight: "5rpx"
        },
      }
    },
    components: {
      // ScrollTop,
    },
    filters: {
      fullImgPath: function(imgPath) {
        if (imgPath) {
          if (imgPath.substring(0, 1) === '/') {
            return 'http://39.100.33.196:9999' + imgPath + '?SiteId=2d86a613-7c24-6eae-731e-7aab57900d32'
          } else {
            return 'http://jd.youyuanren.net:9999/__kb/kfile' + JSON.parse(imgPath)[0].url
          }
        } else {
          return '';
        }
      },
      formatInner: function(path) {
        if (path.substring(0, 1) === "[") {
          return 'http://jd.youyuanren.net:9999/__kb/kfile' + JSON.parse(path)[0].url
        } else {
          return path
        }
      }
    },
    onPageScroll(e) {
      this.scrollTopVal = e.scrollTop;
    },
    onLoad() {
      // console.log(this.$route)
      groupByType({
        params: JSON.stringify({
          shopId: 'f2cd6c41-490e-11ec-96fd-0242ac110007',
          u_id: '90a29782-f9d3-11ed-8b7e-0242ac110003',
          isFront: 1
        })
      }).then(res => {
        this.allGoodsData = res.data
      })

      getIndexNavType({
        params: JSON.stringify({
          nav_pageSize: this.navPageSize,
          shopId: 'f2cd6c41-490e-11ec-96fd-0242ac110007',
          u_id: '90a29782-f9d3-11ed-8b7e-0242ac110003',
          isFront: 1
        })
      }).then(res => {
        this.allTypeData = res.data
      })
      publicApi({
        params: JSON.stringify({
          salerId: '90a29782-f9d3-11ed-8b7e-0242ac110003',
          shopId: 'f2cd6c41-490e-11ec-96fd-0242ac110007',
          isFront: 1
        })
      }).then(res => {
        // console.log(res)
        this.bannerList = res.bannerList;
        this.salephone = res.salephone;
        this.titlename = res.fullname;
        // console.log(this.bannerList);
        uni.setNavigationBarTitle({
          title: res.fullname
        })
      }).catch(e => {
        console.log(e)
      })

    },
    methods: {
      makePhone() {
        uni.makePhoneCall({
          phoneNumber: this.salephone
        })
      },
      searchCheck() {
        if (!this.searchKeywords.trim()) {
          this.$refs.uToast.show({
            title: "请输入关键字",
            type: 'error',
            duration: '1500'
          })
        } else {
          this.changeToSearch(this.searchKeywords)
        }
      },
      changeToSearch(keywords) {

        uni.navigateTo({
          url: '/pages/search/search?keywords=' + keywords + '&salerId=' + '90a29782-f9d3-11ed-8b7e-0242ac110003' +
            '&shopId=' + 'f2cd6c41-490e-11ec-96fd-0242ac110007'
        })
      },
      changeToList(id, name) {
        // console.log(123);
        uni.navigateTo({
          url: "/pages/list/list?typeId=" + id + '&typeName=' + name + '&salerId=' +
            "fdb19476-3897-11ec-96fd-0242ac110007" + '&shopId=' + 'f2cd6c41-490e-11ec-96fd-0242ac110007',
        })
      },
      changeToDetail(item, typeName) {
        if (item.inStock === "1") {
          this.$refs.uToast.show({
            title: "该商品库存不足",
            type: 'error',
            duration: '1500'
          })
        } else {

          uni.navigateTo({
            url: "/pages/detail/detail?id=" + item.id + '&typeName=' + typeName + '&salerId=' +
              "fdb19476-3897-11ec-96fd-0242ac110007" + '&shopId=' + 'f2cd6c41-490e-11ec-96fd-0242ac110007',
          })
        }
      },
      change(item) {
        uni.navigateTo({
          url: "/pages/list/list?typeId=" + item.id + '&typeName=' + item.name + '&salerId=' +
            "fdb19476-3897-11ec-96fd-0242ac110007" + '&shopId=' + 'f2cd6c41-490e-11ec-96fd-0242ac110007',
        })

      },
      swipe(e) {
        this.current = e.detail.current;
      },


    },
  };
</script>

<style lang="scss" scoped>
  .top-bg {
    background: linear-gradient(to bottom, rgba(225, 37, 27, 1), rgba(225, 37, 27, .7) 30%, rgba(225, 37, 27, .3) 80%, rgba(225, 37, 27, 0));
    width: 100%;
    height: 200rpx;
    border-radius: 0 0 100rpx 100rpx;
    position: absolute;
    top: 0;
  }

  .wrap {
    background-color: #f0f0f0;
    padding: 20rpx 32rpx 0 32rpx;

    /deep/ .u-search {
      .u-content {
        border-radius: 30rpx 0 0 30rpx !important;
      }
    }

    /deep/ .top-nav {
      height: 420rpx;
      border-radius: 20rpx;
      padding: 10rpx;
      background: #fff;
      margin-top: 26rpx;

      .swiper {
        height: 350rpx;

        .u-grid-item-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          image {
            width: 50%;
          }

          .grid-text {
            margin-top: 15rpx;

            span {
              white-space: nowrap;
            }
          }

          img {
            height: 70rpx;
          }
        }
      }

    }

    .indicator-dots {
      margin-top: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .indicator-dots-item {
      background-color: #feabac;
      height: 14rpx;
      width: 14rpx;
      border-radius: 7rpx;
      margin: 0 3px;
      transition: all .4s;
    }

    .indicator-dots-active {
      background-color: #fd2f3d;
      width: 30rpx;
    }

    .tit {
      margin-top: 20rpx;
      display: flex;
      line-height: 90rpx;
      align-items: center;
      position: relative;
      justify-content: center;

      .bt {
        font-weight: bold;
        font-size: 40rpx;
        display: flex;
        align-items: center;

        img {
          height: 40rpx;
          margin-right: 10rpx;
        }
      }

      .bt::before,
      .bt::after {
        content: "";
        display: inline-block;
        width: 100rpx;
        height: 1px;
        background: #999;
        margin: 0 15rpx;
      }
    }

    .more {
      background-color: #fd2f3d;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      text-align: center;
      color: #fff;
      margin: 40rpx 0;
      font-size: 30rpx;
    }

    /deep/ .inner-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        border-radius: 15rpx;
        overflow: hidden;
        margin-top: 20rpx;
        width: 335rpx;
        background-color: #ffffff;
        padding: 0 30rpx 30rpx 30rpx;
        position: relative;

        &.soldOut::before {
          content: "库存不足";
          position: absolute;
          padding: 5rpx 10rpx;
          left: 5rpx;
          top: 5rpx;
          z-index: 998;
          font-size: 24rpx;
          background: #fdeded;
          color: #fd2f3d;
          border-bottom-right-radius: 10rpx;
          box-shadow: 0 0 5rpx #bbb;
        }

        .img {
          width: 275rpx !important;
          height: 275rpx !important;
          border-radius: 15rpx !important;
          text-align: center;
          margin: 20rpx 0;

          img {
            width: 80% !important;
            height: 80% !important;
          }
        }

        &.soldOut {
          .tags {
            &>span {
              background: rgba(0, 0, 0, .2);
              color: #666;
            }
          }
        }

        .tags {
          white-space: nowrap;
          overflow-x: scroll;
          padding: 10rpx 0 30rpx 0;

          &>span {
            display: inline-block;
            padding: 10rpx 20rpx;
            margin-right: 10rpx;
            border-radius: 10rpx;
            background: #fdeded;
            color: #fd2f3d;
            font-size: 12px;
          }
        }

        .title {
          line-height: 40rpx;
        }

        .card-footer {
          display: flex;
          justify-content: space-between;
          color: #ff3838;

          .price {
            font-weight: bold;
          }

          img {
            height: 25rpx;
            position: relative;
            top: 2rpx;
            margin-right: 5rpx;
          }
        }

        &.soldOut .card-footer {
          color: #666;

          img {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
          }
        }
      }
    }
  }

  .list {
    padding-bottom: 50rpx;
  }

  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 5px 10px #000;
    padding: 6rpx 32rpx;
    background: rgb(253, 47, 61);
    color: #fff;
    font-weight: bold;
    text-align: center;

    .number {
      font-size: 30rpx;
    }
  }
</style>